<template>
  <div class="tree-list-item">
    <a href="javascript:" :class="{'is-active':isActive}" class="ali-d-flex ali-w100 tree-list-btn" :title="node.name || node.label" @contextmenu="handleMenu($event, node)" @click="handleClick(node)">
      <span :class="{'has-children': node.children && node.children.length > 0}" class="ali-pl5 ali-pr10 ali-font16"><i class="fa fa-caret-right" aria-hidden="true" /></span>
      <span class="ali-font20 ali-pr6">
        <i v-if="node.isdir || node.type === 'folder'" class="fa fa-folder" aria-hidden="true" />
        <i v-else class="fa fa-file ali-font16" aria-hidden="true" />
      </span>
      <span class="name">{{ node.name || node.label }}</span>
    </a>
    <ul v-if="node.children && node.children.length">
      <AliTreeItem v-for="child in node.children" :key="child.label" :node="child" />
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  name: 'AliTreeItem',
  components: {},
  props: {
    node: {
      type: Object,
      default() {
        return {}
      }
    },
    mainData: {
      type: [Array, Object],
      default() {
        return []
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {
    isActive() {
      return this.filePreview.file_id && (this.filePreview.file_id === this.node.file_id)
    },
    ...mapState({
      filePreview: state => state.filePreview
    })
  },
  mounted() {
  },
  methods: {
    handleMenu: function(e, node) {
      e.preventDefault() // 阻止系统右键菜单 IE8-不支持
      if (e.button === 2) {
        const pageX = e.pageX + 6
        const pageY = e.pageY
        this.$bus.$emit('updateMenuStyle', { left: pageX + 'px', top: pageY + 'px', display: 'block' }, node)
      }
    },
    handleClick(node) {
      this.$bus.$emit('updateCenterData', node)
    }
  }
}
</script>

<style scoped lang="scss">
ul,li{margin: 0}
.tree-list-item{
  .tree-list-btn{
    height: 35px;
    border-bottom: solid 1px #ededed;
    white-space: nowrap;
    //width: calc(100% - 10px);
    overflow: hidden;
    &:hover,&.is-active{
      color: rgb(255 255 255);
      background-color: #0f0f0f;
      cursor: pointer;
    }
    .name{
      width: calc(100% - 20px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  ul{padding-left: 25px;}
}
.has-children{
  transform: rotate(90deg);
}

</style>
